<template>
<!--转场动画 -->
<transition name="slide">
    <!-- <div class="singer-detial">
        歌手详情页
    </div> -->
    <!--引入music-list组件 :bg-image驼峰式命名 -->
    <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
    
</transition>
</template>
<script>
import {getSingerDetail} from '@/api/singer.js';
import {mapGetters} from 'vuex';
import {common} from '@/util/common.js';
import {createSong} from '@/js/song.js';
import musicList from '@/components/music-list/music-list.vue';

export default {
  data() {
    return {
      songs: []
    };
  },
  computed: {
    title() {
      return this.singer.name;
    },
    bgImage() {
      return this.singer.avatar;
    },
    ...mapGetters([
        'singer' // store/getters.js文件中挂载singer属性
    ])
  },
  created() {
    this._getSingerDetail();
    console.log('组件路由之间传递获取的singer值', this.singer);
  },
  components: {
    musicList
  },
  methods: {
    _getSingerDetail() {
      if(!this.singer.id){
        this.$router.push('/singer');// Refused to apply style from 'http://10.108.26.140:8080/singer/static/css/reset.css' 
        return;
      }
      getSingerDetail(this.singer.mid).then((res) => {
        console.log(res);
        if( res.code === common.SUCC_OK){
          //console.log(res.data.list);
          this.songs = this._initDataConstruct(res.data.list);
          //console.log(this.songs);
        }
      });
    },

    //歌手详情数据进行结构封装
    _initDataConstruct(list) {
      let ret = [];
      list.forEach((item) => {
        let {musicData} = item; //将musicData对象转换成song[]数组
        //console.log(musicData);
        //console.log('songid的值  ',musicData.songid ,' albummid的值 ' , musicData.albummid); // 输出的结果 songid的值   104775877  albummid的值  000QgFcm0v8WaF
        if(musicData.songid && musicData.albummid) {
          ret.push(createSong(musicData));
        }
      });
      return ret;
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "@/assets/style/mixin.scss";
.singer-detial {
  position: absolute;
  top: -88px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #fff;
  .slide-enter-active, .slide-leave-active{
    transition: all 0.5s;
  }
  .slide-enter, .slide-enter-to {
    transform: translate3d(100%,0,0);
  }
}
</style>

